<div class="main-content">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <ol class="breadcrumb">
                    <li>
                        <i class="clip-file"></i>
                        <a href="#">
                            Logística
                        </a>
                    </li>
                    <li class="active">
                        E/S
                    </li>					
                </ol>
                <div class="page-header">
                    <h1>Compras <small>Registro</small></h1>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <!-- start: DYNAMIC TABLE PANEL -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="icon-external-link-sign"></i>
                        Compras
                        <div class="panel-tools">
                            <a class="btn btn-xs btn-link panel-collapse collapses" href="#">
                            </a>
                            <a class="btn btn-xs btn-link panel-config" href="#panel-config" data-toggle="modal">
                                <i class="icon-wrench"></i>
                            </a>
                            <a class="btn btn-xs btn-link panel-refresh" href="#">
                                <i class="icon-refresh"></i>
                            </a>
                            <a class="btn btn-xs btn-link panel-expand" href="#">
                                <i class="icon-resize-full"></i>
                            </a>
                            <!--<a class="btn btn-xs btn-link panel-close" href="#">
                                <i class="icon-remove"></i>
                            </a> -->
                        </div>
                    </div>
                    <div class="panel-body"> 
                        <div class="row">
                            <div class="col-md-12">
                                <form class="form-horizontal">
                                    <div class="row">
                                        <!-- <div class="col-md-3">
                                             <div class="form-group" style="margin-left: 0px">
                                                 <label class="control-label col-sm-7">
                                                     <input type="checkbox" class="grey">
                                                     Orden de Compra
                                                 </label>
                                                 <div class="col-sm-2">
                                                     <button type="button" class="btn btn-primary"><i class="icon icon-search"></i></button>
                                                 </div>
                                             </div>
                                         </div> -->
                                        <div class="col-md-9">
                                            <div class="form-group">
                                                <label for="ruc" class="col-sm-1 control-label">Proveedor</label>
                                                <div class="col-sm-2">
                                                    <input type="hidden" id="pagina" value="compras">
                                                    <input type="hidden" id="oper" value="add">
                                                    <input type="hidden" id="idCompras" value="0">
                                                    <input type="text" id="ruc" placeholder="RUC" class="form-control limited" maxlength="11"  >
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="hidden" id="codProveedor">
                                                    <input type="text" id="proveedor" placeholder="PROVEEDOR" readonly="readonly" class="form-control">
                                                </div>
                                                <div class="col-sm-1">
                                                    <a class="btn btn-success" data-toggle="modal" href="#vtnFrmProd"><i class="icon icon-plus"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-7">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">Comprobante</label>
                                                <div class="col-sm-3">
                                                    <!--<select id="cboTipoComp" class="form-control">
                                                        <option>Boleta</option>
                                                        <option>Factura</option>
                                                    </select> -->
                                                    <?php
                                                    $css = 'class="form-control search-select" id="cboTipoComp"';
                                                    echo form_dropdown("cboTipoComp", $tipcomp, null, $css);
                                                    ?>
                                                </div>
                                                <label class="col-sm-1 control-label" for="fecCompra">Serie</label>
                                                <div class="col-sm-2">
                                                    <input type="text" id="serie" class="form-control" placeholder="Serie">
                                                </div>
                                                <label class="col-sm-1 control-label" for="fecCompra">Número</label>
                                                <div class="col-sm-3">
                                                    <input type="text" id="numero" class="form-control" placeholder="Número">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label" for="fecCompra">Fecha</label>
                                                <div class="col-sm-10 input-group">
                                                    <input id="fecCompra" class="form-control date-picker" type="text" data-date-viewmode="years" data-date-format="dd-mm-yyyy">
                                                    <span class="input-group-addon">
                                                        <i class="icon-calendar"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>   
                                    <div class="row">
                                         <div class="col-md-3">
                                             <div class="form-group">
                                                 <label class="col-sm-5 control-label">Forma Pago</label>
                                                 <div class="col-sm-7">
                                                     <select class="form-control">
                                                         <option>Crédito</option>
                                                         <option>Contado</option>
                                                     </select>
                                                 </div>
                                             </div>
                                         </div>
                                         <div class="col-md-2">
                                             <div class="form-group">
                                                 <label class="col-sm-7 control-label">Días crédito</label>
                                                 <div class="col-sm-5">
                                                     <input type="text" class="form-control">
                                                 </div>
                                             </div>
                                         </div>
                                     </div> 
                                </form>
                            </div>
                        </div>
                        <hr/>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-horizontal">
                                    <div class="row">
                                        <!--   <div class="col-md-2">
                                               <div class="form-group">
                                                   <label for="cantPed" class="col-sm-3 control-label">Filtro</label>
                                                   <div class="col-sm-9">
                                                       <select id="tipoFiltro" class="form-control" style="width: 125px">
                                                           <option value="desc_prod">Descripción</option>
                                                           <option value="modelo">Modelo</option>
                                                           <option value="desc_marca">Marca</option>
                                                       </select>
                                                   </div>  
                                               </div>  
                                           </div>   -->                                     
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label for="descProd" class="col-sm-2 control-label" style="">Producto</label>
                                                <div class="col-sm-10">
                                                    <input type="hidden" id="codProd">
                                                    <input type="text" id="descProd" style="width: 350px">
                                                </div>  
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="cantPed" class="col-sm-3 control-label">Cantidad</label>
                                                <div class="col-sm-3">
                                                    <input type="text" id="cantProd" value="0" class="form-control">
                                                </div>  
                                                <label for="preProd" class="col-sm-2 control-label">Precio</label>
                                                <div class="col-sm-4">
                                                    <input type="text" id="preProd" value="0" class="form-control">
                                                </div>  
                                            </div>  
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <div class="col-sm-8">
                                                    <button type="submit" id="agregarProd" class="btn btn-blue"><i class="icon-plus"></i> Agregar</button>
                                                </div>  
                                            </div>  
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>                        
                        <div class="row">
                            <div class="col-md-9">
                                <table id="tblProductos" class="table table-condensed table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Código</th>
                                            <th>Producto</th>
                                            <th>Cantidad</th>
                                            <th>Precio Unit.</th>
                                            <th>Precio Total</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>    
                                </table>
                            </div>
                            <div class="col-md-3" style="border-left: 1px #EEEEEE solid;">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="subTotal" class="col-sm-4 control-label">Sub Total</label>
                                            <div class="col-sm-8 input-group">
                                                <span class="input-group-addon">
                                                    <i class="icon-dollar"></i>
                                                </span>
                                                <input type="text" id="subTotal" readonly="readonly" class="form-control text-right" value="0.00">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="igv" class="col-sm-4 control-label">I.G.V.</label>
                                            <div class="col-sm-8 input-group">
                                                <span class="input-group-addon">
                                                    <i class="icon-dollar"></i>
                                                </span>
                                                <input type="text" id="igv" readonly="readonly" class="form-control text-right" value="0.00">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="total" class="col-sm-4 control-label">Total</label>
                                            <div class="col-sm-8 input-group">
                                                <span class="input-group-addon">
                                                    <i class="icon-dollar"></i>
                                                </span>
                                                <input type="text" id="total" readonly="readonly" class="form-control text-right" value="0.00">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3"></div>
                                    <div class="col-md-9">
                                        <button id="guardarCompra" class="btn btn-block micss guardarLarge">
                                            <i class="icon-save"></i>
                                            Guardar <span class="badge badge-danger" id="cantFil">0</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end: DYNAMIC TABLE PANEL -->
            </div>
        </div>
    </div>
</div>
<div id="vtnFrmProd" class="modal fade" aria-hidden="true" role="dialog" tabindex="-1" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" aria-hidden="true" data-dismiss="modal" type="button">
                    ×
                </button>
                <h4 class="modal-title" id="tituFrm">
                    Formulario Proveedor
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <!-- start: TEXT FIELDS PANEL -->
                    <div class="panel-body">
                        <div class="alert" id="mensaje" style="display: none;"></div>
                        <form role="form" class="form-horizontal">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="frmProveedor">Proveedor</label>
                                        <div class="col-sm-10">
                                            <input type="hidden" id="idProv" value="0" class="form-control">
                                            <span class="input-icon">                                                
                                                <input type="text" id="frmProveedor" class="form-control">
                                                <i class="icon-user"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="direccion">Dirección</label>
                                        <div class="col-sm-10">
                                            <span class="input-icon">
                                                <input type="text" id="direccion" class="form-control">
                                                <i class="icon-hand-right"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label" for="frmRuc">RUC</label>
                                        <div class="col-sm-8">
                                            <span class="input-icon">
                                                <input type="text" id="frmRuc" class="form-control limited" maxlength="11">
                                                <i class="icon-hand-right"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label" for="telefono">Teléfono</label>
                                        <div class="col-sm-8">
                                            <span class="input-icon">
                                                <input type="text" id="telefono" class="form-control">
                                                <i class="icon-phone"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="email">Email</label>
                                        <div class="col-sm-10">
                                            <span class="input-icon">
                                                <input type="text" id="email" class="form-control">
                                                <i class="icon-skype"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- end: TEXT FIELDS PANEL -->
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" id="cerrarFormMarca" data-dismiss="modal" type="button">
                    Cerrar
                </button>
                <button class="btn btn-primary" type="button" id="regProveedor" > 
                    Guardar
                </button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $("#guardarCompra").click(function() {
            guardarCompra();
        });

        $("#regProveedor").click(function() {
            registrarProveedor("<?= base_url("logistica/tablasmaestra/registrarProveedor"); ?>");
        });

        $('#ruc').bind("enterKey", function(e) {
            buscarProveedorxRuc("<?= base_url("logistica/proceso/buscarProveedorxRUC"); ?>", $("#ruc").val());
        });
        $('#ruc').keyup(function(e) {
            if (e.keyCode === 13)
            {
                $(this).trigger("enterKey");
            }
        });
    });
</script>